<template>
  <div class="modle banner" v-show="show">
    <div class="tit">
      <b>轮播图</b>
      <span>共（{{ bannerInfo.length }}/3）张</span>
    </div>
    <p class="info">1.最多放三张轮播图</p>
    <p class="info">2.建议尺寸342*129每张/使用本地图片时,≤4M</p>
    <div class="content" v-for="(item, index) in bannerInfo" :key="index">
      <div class="content_left flex-column">
        <el-image class="img" :src="item.img" fit="fill"></el-image>
        <div class="upload flex-center">
          <div class="btn flex-center" @click="changeUploadType(index)">
            更换
          </div>
        </div>
        <!-- <el-upload
          v-if="false"
          class="upload flex-center"
          :data="{ store: 'shop' }"
          :headers="uploadHeader"
          :action="upload_img"
          :on-success="
            (response, file, fileList) => {
              uploadSuccess(response, index);
            }
          "
          :on-error="uploadErr"
        >
          <div class="btn flex-center">更换</div>
        </el-upload> -->
      </div>
      <div class="content_right">
        <p>跳转内容：</p>
        <div class="linkto flex-btw" @click="selectGoods(item.goods_id, index)">
          <span>{{ item.name ? item.name : "请选择商品" }}</span>
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <div class="add flex-middle" v-if="bannerInfo.length < 3">
      <div class="upload" @click="changeUploadType()">
        <div class="upload_box flex-center">
          <i class="el-icon-plus"></i>
        </div>
      </div>
      <!-- <el-upload
        v-if="false"
        ref="upload"
        class="upload"
        :action="upload_img"
        :data="{ store: 'shop' }"
        :headers="uploadHeader"
        :on-success="
          (response, file, fileList) => {
            uploadSuccess(response);
          }
        "
        :on-error="uploadErr"
        :file-list="bannerInfo.imgList"
      >
        <div class="upload_box flex-center">
          <i class="el-icon-plus"></i>
        </div>
      </el-upload> -->
    </div>
    <div class="flex-center">
      <div class="submit flex-center" @click="submit()">保存</div>
    </div>
  </div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { poster_save, poster_index } from "@/api/shop/shop";

export default {
  props: ["show", "puzzleImg", "upload_img", "uploadHeader"],
  data() {
    return {
      bannerInfo: [], // { goods_id:'',name:'',img:'',subimg:'',ordid:0,}
      is_submit: true,
      upload_inedx: "",
    };
  },
  watch: {
    bannerInfo: {
      handler: function (val, oldval) {
        this.is_submit = true;
        val.map((e) => {
          if (!e.goods_id) {
            this.is_submit = false;
          }
        });
      },
      deep: true,
    },
  },
  created() {
    this.listLoading = true;
    let params = Object.assign(
      {
        sign: Md5(
          objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
        ),
      },
      apiUrl().name
    );
    poster_index(params).then((res) => {
      this.listLoading = false;
      if (res.errcode == 0) {
        this.bannerInfo = res.data.list.map((item) => {
          return {
            goods_id: item.goods_id,
            name: item.goods_name,
            img: item.img_dispaly,
            subimg: item.img,
          };
        });
      } else {
        this.$message.error(res.errmsg);
      }
    });
  },
  methods: {
    submit() {
      if (!this.is_submit) {
        this.$message.error("请选择跳转的商品");
        return;
      }
      this.listLoading = true;
      let data = this.bannerInfo.map((item, index) => {
        return {
          img: item.subimg,
          goods_id: item.goods_id,
          ordid: index + 1,
        };
      });
      data = JSON.stringify(data);
      let params = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { list: data })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { list: data }
      );
      poster_save(params).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //打开父组件的选择商品弹窗
    selectGoods(id, index) {
      let radio = true;
      this.$emit("selectGoods", {
        id,
        index,
        ref: "refBanner",
        isRadio: radio,
      });
    },
    //获取到父组件传过来的商品id，name
    getSelectedGood(index, info) {
      if (info.name) {
        this.bannerInfo[index].name = info.name;
        this.bannerInfo[index].goods_id = info.id;
      }
    },
    uploadSuccess(res, index) {
      if (JSON.stringify(index)) {
        this.bannerInfo[index].subimg = res.data.path; //上传的路径
        this.bannerInfo[index].img = res.data.src; //显示的路径
      } else {
        this.bannerInfo.push({
          subimg: res.data.path,
          img: res.data.src,
          name: "",
          goods_id: "",
        });
      }
    },
    uploadErr() {
      this.$message.error("上传失败，请重试");
    },
    // 打开父组件的图片上传方式
    changeUploadType(index) {
      this.upload_inedx = "";
      if (index !== "") {
        this.upload_inedx = index;
      }
      this.$emit("changeUploadType", {
        pid: 1,
        ref: "refBanner",
      });
    },
    // 获取父级返回的图片信息
    getUploadImg(res) {
      console.log(res);
      let index = this.upload_inedx;
      this.uploadSuccess(res, index);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  .info {
    margin-top: 14px;
  }
  .content {
    margin-top: 17px;
    background: white;
    padding: 15px 20px;
    display: flex;
    .content_left {
      .img {
        width: 287px;
        height: 110px;
      }
      .btn {
        padding: 6px 28px;
        color: #19b098;
        border: 1px solid #19b098;
        margin-top: 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .content_right {
      color: #616161;
      font-size: 14px;
      margin-left: 16px;
      .linkto {
        background: #e1f3f0;
        border: 1px solid #19b098;
        width: 197px;
        height: 34px;
        border-radius: 4px;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
      }
    }
  }
  .add {
    width: 540px;
    height: 160px;
    background: #fff;
    margin-top: 15px;
    position: relative;
    box-sizing: border-box;
    // /deep/.el-upload--picture-card {
    //   left: 40px;
    //   top: 20px;
    //   width: 188px;
    // }

    .upload_box {
      width: 188px;
      height: 110px;
      border: 2px dashed #c4c4c4;
      margin-left: 40px;
    }
  }
}
.submit {
  cursor: pointer;
}
</style>